<html>
    <head>
        <title>Canvas Hex test</title>
        <script type="text/javascript" src="lib/hex/hex.js">
        </script>
        <link rel="stylesheet" type="text/css" href="css/hexmap.css"/>
		<!-- libs -->		
        <script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js">
        </script>
        <script type="text/javascript" src="lib/jquery.checkboxes.min.js">
        </script>
		<!-- utils -->
        <script type="text/javascript" src="script/hexCalcUtil.js">
        </script>
        <script type="text/javascript" src="script/hexUtil.js">
        </script>
        <script type="text/javascript" src="script/interactUtil.js">
        </script>
        <script type="text/javascript" src="script/drawGridUtil.js">
        </script>
        <script type="text/javascript" src="script/interfaceUtil.js">
        </script>		
    </head>
    <body>
        <div id="content">
            <canvas id="hexgrid" width="600" height="600">
            </canvas>
            <div id="terrain_icons">
                <div class="icon_text">
                    <div id="water" class="icon terrainChoice selected">
                    </div>
                    <div class="label">
                        Water
                    </div>
                </div>
                <div class="icon_text">
                    <div id="dirt1" class="icon terrainChoice">
                    </div>
                    <div class="label">
                        Dirt
                    </div>
                </div>
                <div class="icon_text">
                    <div id="dirt2" class="icon terrainChoice">
                    </div>
                    <div class="label">
                        Dirt
                    </div>
                </div>
                <div class="icon_text">
                    <div id="forest1" class="icon terrainChoice">
                    </div>
                    <div class="label">
                        Forest
                    </div>
                </div>
                <div class="icon_text">
                    <div id="forest2" class="icon terrainChoice">
                    </div>
                    <div class="label">
                        Forest
                    </div>
                </div>				
                <div class="icon_text">
                    <div id="grain" class="icon terrainChoice">
                    </div>
                    <div class="label">
                        Grain
                    </div>
                </div>
                <div class="icon_text">
                    <div id="brush1" class="icon terrainChoice">
                    </div>
                    <div class="label">
                        Brush
                    </div>
                </div>
                <div class="icon_text">
                    <div id="grass" class="icon terrainChoice">
                    </div>
                    <div class="label">
                        Grassland
                    </div>
                </div>				
            </div>
            <div id="decor_icons">
                <div class="icon_text">
                    <div id="ancient-city" class="icon decorChoice">
                    </div>
                    <div class="label">
                        Ancient city
                    </div>
                </div>
                <div class="icon_text">
                    <div id="ancient-city-walled" class="icon decorChoice">
                    </div>
                    <div class="label">
                        Ancient city walled
                    </div>
                </div>	
                <div class="icon_text">
                    <div id="ancient-town" class="icon decorChoice">
                    </div>
                    <div class="label">
                        Ancient town
                    </div>
                </div>	
                <div class="icon_text">
                    <div id="ancient-town-walled" class="icon decorChoice">
                    </div>
                    <div class="label">
                        Ancient town walled
                    </div>
                </div>	
                <div class="icon_text">
                    <div id="cairn" class="icon decorChoice">
                    </div>
                    <div class="label">
                        Cairn
                    </div>
                </div>	
                <div class="icon_text">
                    <div id="castle1" class="icon decorChoice">
                    </div>
                    <div class="label">
                        Castle
                    </div>
                </div>	
                <div class="icon_text">
                    <div id="cathedral1" class="icon decorChoice">
                    </div>
                    <div class="label">
                        Cathedral
                    </div>
                </div>	
                <div class="icon_text">
                    <div id="tower-sage" class="icon decorChoice">
                    </div>
                    <div class="label">
                        Sage tower
                    </div>
                </div>	
                <div class="icon_text">
                    <div id="ziggurat" class="icon decorChoice">
                    </div>
                    <div class="label">
                        Ziggurat
                    </div>
                </div>																								
            </div>	
            <div id="path_icons">
                <div class="icon_text">
                    <div id="dirt_road_horiz" class="icon pathChoice">
                    </div>
                    <div class="label">
                        Dirt road
                    </div>
                </div>                	
                <div class="icon_text">
                    <div id="dirt_road_nw_se" class="icon pathChoice">
                    </div>
                    <div class="label">
                        Dirt road
                    </div>
                </div>            	
                <div class="icon_text">
                    <div id="dirt_road_ne_se" class="icon pathChoice">
                    </div>
                    <div class="label">
                        Dirt road
                    </div>
                </div>  
                <div class="icon_text">
                    <div id="dirt_road_ne_sw" class="icon pathChoice">
                    </div>
                    <div class="label">
                        Dirt road
                    </div>
                </div>            	
                <div class="icon_text">
                    <div id="dirt_road_nw_sw" class="icon pathChoice">
                    </div>
                    <div class="label">
                        Dirt road
                    </div>
                </div>
                <div class="icon_text">
                    <div id="dirt_road_sw_se" class="icon pathChoice">
                    </div>
                    <div class="label">
                        Dirt road
                    </div>
                </div> 					
                <div class="icon_text">
                    <div id="dirt_road_nw_ne" class="icon pathChoice">
                    </div>
                    <div class="label">
                        Dirt road
                    </div>
                </div> 
                <div class="icon_text">
                    <div id="river_horiz" class="icon pathChoice">
                    </div>
                    <div class="label">
                        River
                    </div>
                </div>                	
                <div class="icon_text">
                    <div id="river_nw_se" class="icon pathChoice">
                    </div>
                    <div class="label">
                        River
                    </div>
                </div>            	
                <div class="icon_text">
                    <div id="river_ne_se" class="icon pathChoice">
                    </div>
                    <div class="label">
                        River
                    </div>
                </div>  
                <div class="icon_text">
                    <div id="river_ne_sw" class="icon pathChoice">
                    </div>
                    <div class="label">
                        River
                    </div>
                </div>            	
                <div class="icon_text">
                    <div id="river_nw_sw" class="icon pathChoice">
                    </div>
                    <div class="label">
                        River
                    </div>
                </div>
                <div class="icon_text">
                    <div id="river_sw_se" class="icon pathChoice">
                    </div>
                    <div class="label">
                        River
                    </div>
                </div> 					
                <div class="icon_text">
                    <div id="river_nw_ne" class="icon pathChoice">
                    </div>
                    <div class="label">
                        River
                    </div>
                </div>  				           																					          	
            </div>	            						
            <div id="gridChoices">
                <div class="gridchoice">
                    <input type="checkbox" id="grid2" name="grid2" value="on" />Zoom in grid 
                </div>
                <div class="gridchoice">
                    <input type="checkbox" id="grid1" name="grid1" value="on" />Grid
                </div>
                <div class="gridchoice">
                    <input type="checkbox" id="grid3" name="grid3" value="on" />Zoom out grid 
                </div>
                <div class="gridchoice">
                    <input type="checkbox" id="coords" name="coords" value="on" />Show coordinates 
                </div>
                <div class="gridchoice">
                    <input type="checkbox" id="compass" name="compass" value="on" />Compass
                </div>
				<div>
					<button id="undo" name="undo" onclick="undo()">Undo</button>
					<button id="redo" name="redo" onclick="redo()">Redo</button>					
				</div>
            </div>
        </div>
    </body>
</html>